<template>
	<view class="content">
		<view class="hei-view shadow zoomIn-d3s" v-for="(hei, i) in heis" :key="i" @tap="onHeiTap(hei.heiId)">
			<view class="hei-image-view" v-if="hei.images != undefined && hei.images.length >= 1">
				<image class="hei-image" :src="hei.images[0].src" mode="aspectFill"></image>
			</view>
			<view class="hei-content-view">
				<view class="hei-content-text">{{ hei.content }}</view>
			</view>
			<view class="hei-title-view">
				<image class="hei-avatar" mode="aspectFill"
					:src="(hei.avatar == undefined || hei.avatar == '') ? '/static/images/hei.png' : hei.avatar"></image>
				<text class="hei-title">{{ hei.username }}</text>
				<view class="hei-like-view">
					<text class="iconfont hei-like">&#xe8a8;</text>
					<text class="hei-like-number">{{ hei.likes }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getHeis
	} from "@/network/HeiApi.js";
	export default {
		data() {
			return {
				heis: []
			}
		},

		mounted() {
			
		},

		onPullDownRefresh() {
			this.refreshData();
		},
		
		onShow() {
			this.refreshData();
		},
		
		onNavigationBarButtonTap(option) {
			if (option.index == 0) {
				// 新增嘿文，先选择图片
				uni.chooseImage({
					sizeType: ["compressed"],
					success:function(res){
						let files = res.tempFiles;
						let array = new Array();
						for (let i = 0; i< files.length; i++) {
							let json = {"path": files[i].path, "size": files[i].size};
							array.push(json);
						}
						uni.navigateTo({
							url: "/pages/addHei/addHei?files=" + encodeURIComponent(JSON.stringify(array))
						});
					}
				});
			}
		},

		methods: {
			/**
			 * 刷新数据
			 */
			refreshData: function() {
				getHeis().then(data => {
					this.heis = data.content;
					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.showModal({
						title: "获取嘿文失败",
						content: err
					});
					uni.stopPullDownRefresh();
				});
			},
			
			/**
			 * 嘿文点击事件
			 * @param {Object} heiId
			 */
			onHeiTap: function(heiId) {
				uni.navigateTo({
					url: "/pages/hei/hei?heiId=" + heiId
				});
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: var(--status-bar-height);
		padding-left: 20rpx;
		column-count: 2;
		column-gap: 0;
		text-align: center;
	}

	.hei-view {
		background-color: white;
		border-radius: 20px;
		margin: 20rpx;
		margin-left: 0rpx;
		margin-bottom: 0rpx;
		width: 95%;
		display: inline-block;
		transition: ease-out all .3s;
		vertical-align: bottom;
		overflow: hidden;
	}
	
	.hei-view:active {
		background-color: $u-info-light;
	}

	.hei-title-view {
		padding: 20rpx;
		padding-top: 0rpx;
		padding-bottom: 24rpx;
		height: 38rpx;
		line-height: 38rpx;
		border-radius: 20px 20px 0px 0px;
		position: relative;
		text-align: left;
	}
	
	.hei-like-view {
		float: right;
		margin-left: 20rpx;
		color: var(--contentColor);
		position: relative;
	}
	
	.hei-like {
		font-size: 34rpx;
		position: relative;
		top: 2rpx;
	}
	
	.hei-like-number {
		font-size: 24rpx;
		margin-left: 4rpx;
		position: relative;
		top: -2rpx;
	}

	.hei-avatar {
		width: 38rpx;
		height: 38rpx;
		border-radius: 999px;
		vertical-align: bottom;
		background-color: $u-primary;
	}

	.hei-title {
		margin-left: 10rpx;
		font-size: 24rpx;
		color: var(--contentColor);
	}
	
	.hei-image-view {
	}
	
	.hei-image {
		height: 260rpx;
		width: 100%;
	}

	.hei-content-view {
		padding: 20rpx;
		padding-bottom: 10rpx;
		padding-top: 0rpx;
		text-align: left;
	}

	.hei-content-text {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: var(--titleColor);
		font-size: 26rpx;
	}
	
</style>
